<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/aui/aui.css" />
		<style type="text/css">
			.aui-in {
				overflow-x: hidden;
			}
			.aui-in li {
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				box-sizing: border-box;
				position: relative;
				clear: both;
			}
			.aui-in li:after {
				border-bottom: 1px solid #c8c7cc;
				display: block;
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				-webkit-transform-origin: 0 0;
				-webkit-transform: scale(1);
				pointer-events: none;
			}
			.aui-in li > div {
				-webkit-box-align: center;
				width: 100%;
				box-sizing: border-box;
			}
			.hidden-menu {
				width: auto !important;
				position: relative;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-flex-flow: row;
				flex-flow: row;
				width: 100%;
			}
			.hidden-menu p {
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				display: box;
				box-orient: horizontal;
				box-pack: center;
				box-align: center;
				padding: 0 20px;
				color: #fff;
				font-size: 18px;
			}
			.one {
				background: #f00;
			}
			.two {
				background: #F1C40F;
			}
			.three {
				background: #0000FF;
			}
		</style>
	</head>
	<body>
		<div id="result"></div>
		<div class="aui-content">
			<ul class="aui-user-view aui-in">
				<li tapmode >
					<div class="aui-user-view-cell aui-img drop-div" tapmode >
						<img class="aui-img-object aui-pull-left" src="../../image/pic.jpg">
						<div class="aui-img-body">
							<span>点点例</span>
							<p class='aui-ellipsis-1'>
								中山赢友网络科技有限公司
							</p>
						</div>
					</div>
					<div class="hidden-menu">
						<p class="one" tapmode >
							删除
						</p>
						<p class="two" tapmode >
							置顶
						</p>
					</div>
				</li>
				<li tapmode >
					<div class="aui-user-view-cell aui-img drop-div" tapmode >
						<img class="aui-img-object aui-pull-left" src="../../image/pic.jpg">
						<div class="aui-img-body">
							<span>点点例</span>
							<p class='aui-ellipsis-1'>
								中山赢友网络科技有限公司
							</p>
						</div>
					</div>
					<div class="hidden-menu">
						<p class="one" tapmode >
							删除
						</p>
						<p class="two" tapmode >
							置顶
						</p>
						<p class="three" tapmode >
							更多
						</p>
					</div>
				</li>
				<li tapmode >
					<div class="aui-user-view-cell aui-img drop-div" tapmode >
						<img class="aui-img-object aui-pull-left" src="../../image/pic.jpg">
						<div class="aui-img-body">
							<span>点点例</span>
							<p class='aui-ellipsis-1'>
								中山赢友网络科技有限公司
							</p>
						</div>
					</div>
					<div class="hidden-menu">
						<p class="one" tapmode >
							删除
						</p>
						<p class="two" tapmode >
							置顶
						</p>
					</div>
				</li>
				<li tapmode >
					<div class="aui-user-view-cell aui-img drop-div" tapmode >
						<img class="aui-img-object aui-pull-left" src="../../image/pic.jpg">
						<div class="aui-img-body">
							<span>点点例</span>
							<p class='aui-ellipsis-1'>
								中山赢友网络科技有限公司
							</p>
						</div>
					</div>
					<div class="hidden-menu">
						<p class="one" tapmode >
							删除
						</p>
						<p class="two" tapmode >
							置顶
						</p>
					</div>
				</li>
				<li tapmode >
					<div class="aui-user-view-cell aui-img drop-div" tapmode >
						<img class="aui-img-object aui-pull-left" src="../../image/pic.jpg">
						<div class="aui-img-body">
							<span>点点例</span>
							<p class='aui-ellipsis-1'>
								中山赢友网络科技有限公司
							</p>
						</div>
					</div>
					<div class="hidden-menu">
						<p class="one" tapmode >
							删除
						</p>
						<p class="two" tapmode >
							置顶
						</p>
					</div>
				</li>
				<li tapmode >
					<div class="aui-user-view-cell aui-img drop-div" tapmode >
						<img class="aui-img-object aui-pull-left" src="../../image/pic.jpg">
						<div class="aui-img-body">
							<span>点点例</span>
							<p class='aui-ellipsis-1'>
								中山赢友网络科技有限公司
							</p>
						</div>
					</div>
					<div class="hidden-menu">
						<p class="one" tapmode >
							删除
						</p>
						<p class="two" tapmode >
							置顶
						</p>
					</div>
				</li>
				<li tapmode >
					<div class="aui-user-view-cell aui-img drop-div" tapmode >
						<img class="aui-img-object aui-pull-left" src="../../image/pic.jpg">
						<div class="aui-img-body">
							<span>点点例</span>
							<p class='aui-ellipsis-1'>
								中山赢友网络科技有限公司
							</p>
						</div>
					</div>
					<div class="hidden-menu">
						<p class="one" tapmode >
							删除
						</p>
						<p class="two" tapmode >
							置顶
						</p>
					</div>
				</li>
				<li tapmode >
					<div class="aui-user-view-cell aui-img drop-div" tapmode >
						<img class="aui-img-object aui-pull-left" src="../../image/pic.jpg">
						<div class="aui-img-body">
							<span>点点例</span>
							<p class='aui-ellipsis-1'>
								中山赢友网络科技有限公司
							</p>
						</div>
					</div>
					<div class="hidden-menu">
						<p class="one" tapmode >
							删除
						</p>
						<p class="two" tapmode >
							置顶
						</p>
					</div>
				</li>
				<li tapmode >
					<div class="aui-user-view-cell aui-img drop-div" tapmode >
						<img class="aui-img-object aui-pull-left" src="../../image/pic.jpg">
						<div class="aui-img-body">
							<span>点点例</span>
							<p class='aui-ellipsis-1'>
								中山赢友网络科技有限公司
							</p>
						</div>
					</div>
					<div class="hidden-menu">
						<p class="one" tapmode >
							删除
						</p>
						<p class="two" tapmode >
							置顶
						</p>
					</div>
				</li>
				<li tapmode >
					<div class="aui-user-view-cell aui-img drop-div" tapmode >
						<img class="aui-img-object aui-pull-left" src="../../image/pic.jpg">
						<div class="aui-img-body">
							<span>点点例</span>
							<p class='aui-ellipsis-1'>
								中山赢友网络科技有限公司
							</p>
						</div>
					</div>
					<div class="hidden-menu">
						<p class="one" tapmode >
							删除
						</p>
						<p class="two" tapmode >
							置顶
						</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../../script/AHelper.js"></script>
	<script type="text/javascript" src="../../script/zepto.min.js"></script>
	<script type="text/javascript" src="../../script/hammer.min.js"></script>
	<script type="text/javascript">
		var hammertime = null;
		var maxWidth = 0;
		var marginLeft = 0;
		function addPan(obj) {
			marginLeft = 0;
			// 获取最大的滑动值
			maxWidth = obj.siblings(".hidden-menu").width();
			hammertime = new Hammer(obj[0], {
				domEvents : true
			});
			// 开始拖动
			hammertime.on("panstart", function(e) {
				marginLeft = parseInt(obj.css("margin-left"), 10);
				obj.parent().siblings().each(function() {
					$(this).children(".drop-div").css({
						"transition" : "margin-left 0.2s",
						"-webkit-transition" : "margin-left 0.2s",
						"margin-left" : "0px"
					});
				});
			});
			// 拖动过程
			hammertime.on("panmove", function(e) {
				var panRange = marginLeft + e.deltaX;
				if (panRange < 0 && panRange > -maxWidth) {
					obj.css({
						"margin-left" : panRange + "px"
					});
				}
			});
			// 拖动结束
			hammertime.on("panend", function(e) {
				marginLeft = parseInt(obj.css("margin-left"));
				if (e.deltaX < 0) {
					if (marginLeft > -70) {
						obj.css({
							"transition" : "margin-left 0.2s",
							"-webkit-transition" : "margin-left 0.2s",
							"margin-left" : "0px"
						});
					} else {
						obj.css({
							"transition" : "margin-left 0.2s",
							"-webkit-transition" : "margin-left 0.2s",
							"margin-left" : (-maxWidth) + "px"
						});
					}
				} else {
					if (marginLeft < -(maxWidth - 70)) {
						obj.css({
							"transition" : "margin-left 0.2s",
							"-webkit-transition" : "margin-left 0.2s",
							"margin-left" : (-maxWidth) + "px"
						});
					} else {
						obj.css({
							"transition" : "margin-left 0.2s",
							"-webkit-transition" : "margin-left 0.2s",
							"margin-left" : "0px"
						});
					}
				}
			});
		}

		Zepto(function($) {
			$(".aui-in li").each(function() {
				addPan($(this).children(".drop-div"));
			});
			$(".drop-div").on("tap", function() {
				$(this).css({
					"transition" : "margin-left 0.2s",
					"-webkit-transition" : "margin-left 0.2s",
					"margin-left" : "0px"
				});
			});
		});
	</script>
</html>